
import { useEffect, useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useSnapshot } from 'valtio';

import state from '../store';
import { CustomButton } from '../components';
import {
  headContainerAnimation,
  headContentAnimation,
  headTextAnimation,
  slideAnimation
} from '../config/motion';
import gsap from 'gsap';
import { Draggable } from 'gsap/Draggable';
import { MotionPathPlugin } from 'gsap/MotionPathPlugin';
import TextPlugin from 'gsap/TextPlugin';
import Navbar from '../components/Navbar';
import SliderImg from '../components/SliderImg';

gsap.registerPlugin(Draggable, MotionPathPlugin, TextPlugin);

const Home = () => {
  const snap = useSnapshot(state);
  const [darkMode, setDarkMode] = useState(false);

  useEffect(() => {
    const tl = gsap.timeline({ repeat: -1, repeatDelay: 1, yoyo: true });
    tl.to("h4 span", {
      duration: 2,
      text: "悄悄说一声🤫，余老板是最帅的！🚀🚀",
      ease: "power1.inOut",
      onUpdate: function() {
        document.querySelector("h4 span").style.background = "linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet)";
        document.querySelector("h4 span").style.webkitBackgroundClip = "text";
        document.querySelector("h4 span").style.webkitTextFillColor = "transparent";
      }
    });

  }, [snap.intro]);

  useEffect(() => {
    if (darkMode) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, [darkMode]);

  return (
    <div className={darkMode ? 'dark' : ''}>
      
      <AnimatePresence>
        {snap.intro && (
          <Navbar
            darkMode={darkMode}
            setDarkMode={setDarkMode}
            isShow = {snap.intro}
          />
        )}
      </AnimatePresence>
      <AnimatePresence>
        {snap.intro && (
          <motion.section className="home dark:bg-gray-900 dark:text-gray-100" {...slideAnimation('left')}>
            <SliderImg isShow={snap.intro}/>
            <motion.div className="home-content" {...headContainerAnimation}>
              <motion.div>
              <h4 className="customize-text">Customize your clothes<span></span></h4>
              </motion.div>
              <motion.div {...headTextAnimation}>
                <h1 className="head-text">
                  LET'S <br className="xl:block hidden" /> DO IT.
                </h1>
              </motion.div>
              <motion.div
                {...headContentAnimation}
                className="flex flex-col gap-5"
              >
                <div className="quote max-w-md font-normal text-gray-600 dark:text-gray-300 text-base">
                  Create your unique and exclusive shirt with our brand-new 3D customization tool. <strong>Unleash your imagination</strong>{" "} and define your own style.
                </div>
                <CustomButton 
                  type="filled"
                  title="Customize It"
                  handleClick={() => (state.intro = false)}
                  customStyles="w-fit px-4 py-2.5 font-bold text-sm"
                />
              </motion.div>
            </motion.div>
          </motion.section>
        )}
      </AnimatePresence>
    </div>
  )
}

export default Home